<div>
  <div>
    <div>
      <label class="ml5 f-size24">
        Http Tool
      </label>
    </div>
    <div class="p10" style="height:calc(100vh - 200px);">
      <div nz-row>
        <div nz-col nzSpan="16">
          <div nz-row>
            <div nz-col nzSpan="4" class="tar">
              <label class="mr20 lh32">接口</label>
            </div>
            <div nz-col nzSpan="20">
              <input nz-input [(ngModel)]="url" placeholder="https://jccore.cn/Account/Login?rnd=0.12345798"/>
            </div>
          </div>
          <div nz-row class="mt10">
            <div nz-col nzSpan="4" class="tar">
              <label class="mr20 lh32">参数</label>
            </div>
            <div nz-col nzSpan="20">
              <textarea nz-input [(ngModel)]="params" placeholder="参数：a=val1&b=val2&c=val3" spellcheck="false"></textarea>
              <label
                class="f-size12 color-gray">说明：Get参数可以加在参数框里,也可直接加在Url后面，Post参数请放在参数框中。格式：a=val1&b=val2&c=val3</label>
            </div>
          </div>
          <div nz-row class="mt10">
            <div nz-col nzSpan="4" class="tar">
              <label class="mr20 lh32">请求方式</label>
            </div>
            <div nz-col nzSpan="16">
              <nz-select class="w150" [(ngModel)]="method" nzPlaceHolder="Choose">
                <nz-option nzValue="Get" nzLabel="Get"></nz-option>
                <nz-option nzValue="Post" nzLabel="Post">Post</nz-option>
              </nz-select>
              <nz-select class="ml20 w150" [(ngModel)]="ecode" nzPlaceHolder="Choose">
                <nz-option nzValue="UTF-8" nzLabel="UTF-8"></nz-option>
                <nz-option nzValue="gbk" nzLabel="GBK">Post</nz-option>
              </nz-select>
            </div>
          </div>
          <div nz-row class="mt10">
            <div nz-col nzSpan="4" class="tar">
              <label class="mr20 lh32">Content-Type</label>
            </div>
            <div nz-col nzSpan="19">
              <nz-select class="w320" [(ngModel)]="contentType" nzPlaceHolder="Choose">
                <nz-option nzValue="application/json" nzLabel="application/json"></nz-option>
                <nz-option nzValue="application/x-www-form-urlencoded"
                           nzLabel="application/x-www-form-urlencoded"></nz-option>
                <nz-option nzValue="multipart/form-data" nzLabel="multipart/form-data"></nz-option>
              </nz-select>
              <a nz-button nzSize="small" nzType="primary" nzGhost
                 (click)="showSuper = !showSuper" class="pull-right mt8 w120">{{showSuper ? '隐藏':'显示'}}高级功能</a>
            </div>
          </div>
          <div *ngIf="showSuper">
            <div nz-row class="mt10">
                <div nz-col nzSpan="4" class="tar">
                  <label class="mr20 lh32">Cookie</label>
                </div>
              <div nz-col nzSpan="20">
                <textarea nz-input [(ngModel)]="cookie" rows="3" placeholder="格式：a=val1&b=val2&c=val3" spellcheck="false"></textarea>
              </div>
            </div>
            <div nz-row class="mt10">
                <div nz-col nzSpan="4" class="tar">
                  <label class="mr20 lh32">Header</label>
                </div>
              <div nz-col nzSpan="20">
                <textarea nz-input [(ngModel)]="header" rows="3" placeholder="格式：key:value的格式,一行一条" spellcheck="false"></textarea>
              </div>
            </div>
          </div>
          <div nz-row class="mt20">
            <div nz-col nzSpan="20" nzOffset="4">
              <button nz-button nzType="primary" class="w320" (click)="submit()">提交</button>
              <button nz-button nzType="primary" class="ml40 w100" (click)="clear()">清空</button>
            </div>
          </div>
          <div nz-row class="mt20">
            <div nz-col nzSpan="20" nzOffset="4">
              <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
                <nz-tab nzTitle="Preview">
                  Content of Tab Pane Preview
                </nz-tab>
                <nz-tab nzTitle="Response">
                  Content of Tab Pane ResponseString
                </nz-tab>
                <nz-tab nzTitle="Headers">
                  Content of Tab Pane Headers
                </nz-tab>
              </nz-tabset>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


